<route lang="json5">
  {
    style: {
      navigationBarTitleText: '我的订单',
    },
  }
  </route>
<template>
  <view class="page">
    <view class="header">
      <view class="tabs">
        <view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]"
          @click="handleTabClick(index)">
          {{ tab }}
        </view>
      </view>
    </view>

    <view class="content-card">
      <scroll-view class="order-list" scroll-y>
        <view class="order-item" v-for="item in orderList" :key="item.id"
          @click="handleOrderDetail(item.id, item.order_sn)">
          <view class="order-header">
            <text class="order-no">订单号：{{ item.order_sn }}</text>
            <text class="order-status">{{ item.status_text }}</text>
          </view>

          <view class="goods-info">
            <image class="goods-image" :src="item.goods[0].image" mode="aspectFill" />
            <view class="goods-detail">
              <view class="goods-name">{{ item.goods[0].name }}</view>
              <view class="goods-price">¥{{ item.goods[0].price }} × {{ item.goods[0].nums }}</view>
            </view>
          </view>

          <view class="order-footer">
            <view class="price-info">

              <view class="total-price">
                总金额：
                <text class="amount">¥{{ item.order_amount }}</text>
              </view>
            </view>
            <!-- <uni-button class="refund-btn" size="mini" @click="handleRefund">申请退款</uni-button> -->
          </view>
        </view>

        <view class="no-more">没有更多数据了</view>
      </scroll-view>

    </view>


    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <view class="popup-title">申请退款</view>
        <view class="popup-text">确认申请退款吗？</view>
        <view class="popup-btns">
          <uni-button class="cancel-btn" size="mini" @click="closePopup">取消</uni-button>
          <uni-button class="confirm-btn" size="mini" type="primary" @click="confirmRefund">
            确认
          </uni-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getOrderListAPI } from '@/service/index/index'
import { useRoute } from 'vue-router'
const route = useRoute()

const tabs = ['全部', '待确认', '待收货', '已收货']
const currentTab = ref(0)
const popup = ref()

const handleTabClick = (index: number) => {
  currentTab.value = index
  getOrderList()
}

const handleRefund = () => {
  popup.value.open()
}

const closePopup = () => {
  popup.value.close()
}

const confirmRefund = () => {
  uni.showToast({
    title: '退款申请已提交',
    icon: 'success',
  })
  popup.value.close()
}
const handleOrderDetail = (id: number, sn: string) => {
  uni.navigateTo({
    url: `/pages/my/order_detail?id=${id}&sn=${sn}`
  })
}
const orderList = ref([])
const getOrderList = async () => {
  const res = await getOrderListAPI({
    page: 1,
    page_size: 10,
    status: currentTab.value
  })
  if (res.code === 1) {
    orderList.value = res.data.list
  }
}
//#ifdef APP_PLUS || MP_WEIXIN
onLoad((options) => {
  if (options.status) {
    currentTab.value = Number(options.status)
  }
  getOrderList()
})
//#endif
//#ifdef H5
onMounted(() => {
  if (route.query.status) {
    currentTab.value = Number(route.query.status)
  }
  getOrderList()
})
//#endif
</script>

<style>
page {
  height: 100%;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.header {
  flex-shrink: 0;
  background-color: #ffffff;
}

.title {
  padding: 30rpx;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  text-align: center;
}

.content-card {
  padding: 0 20rpx;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eeeeee;
}

.tab-item {
  position: relative;
  flex: 1;
  height: 88rpx;
  font-size: 14px;
  line-height: 88rpx;
  color: #666666;
  text-align: center;
}

.tab-item.active {
  color: #1890ff;
}

.tab-item.active::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40rpx;
  height: 4rpx;
  content: '';
  background-color: #1890ff;
  transform: translateX(-50%);
}

.order-list {
  flex: 1;
  padding: 20rpx 0;
  overflow: auto;
}

.order-item {
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.order-no {
  font-size: 12px;
  color: #999999;
}

.order-status {
  font-size: 14px;
  color: #1890ff;
}

.goods-info {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #eeeeee;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.goods-detail {
  flex: 1;
  margin-left: 20rpx;
}

.goods-name {
  margin-bottom: 10rpx;
  font-size: 14px;
  color: #333333;
}

.goods-price {
  font-size: 14px;
  color: #666666;
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}

.price-info {
  font-size: 14px;
  color: #666666;
}

.amount {
  font-weight: 500;
  color: #ff6b00;
}

.delivery-fee {
  margin-bottom: 10rpx;
}

.refund-btn {
  font-size: 14px;
  color: #1890ff;
  background-color: #ffffff;
  border: 1px solid #1890ff;
}

.no-more {
  padding: 30rpx 0;
  font-size: 12px;
  color: #999999;
  text-align: center;
}

.popup-content {
  width: 560rpx;
  padding: 40rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.popup-title {
  margin-bottom: 20rpx;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  text-align: center;
}

.popup-text {
  margin-bottom: 40rpx;
  font-size: 14px;
  color: #666666;
  text-align: center;
}

.popup-btns {
  display: flex;
  justify-content: center;
}

.cancel-btn {
  margin-right: 20rpx;
  color: #666666;
  background-color: #f5f5f5;
}

.confirm-btn {
  background-color: #1890ff;
}
</style>
